<template>
  <div class="footer_content">
    <van-tabbar v-model="active">
      <van-tabbar-item to="/" icon="home-o">标签</van-tabbar-item>
      <van-tabbar-item to="/pledge" icon="search">标签</van-tabbar-item>
      <van-tabbar-item to="/chart" icon="friends-o">标签</van-tabbar-item>
      <van-tabbar-item to="/login" icon="setting-o">标签</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute()
const active = ref(0);
watch(  
  () => route,  
  (newRoute) => {  
    if(newRoute.path == '/market'){
      active.value = 0
    }else if(newRoute.path == '/pledge'){
      active.value = 1
    }else if(newRoute.path == '/chart'){
      active.value = 2
    }else{
      active.value = 3
    }
  },  
  { deep: true }
);
onMounted(() => {
  if(route.path == '/home'){
      active.value = 0
    }else if(route.path == '/two'){
      active.value = 1
    }else if(route.path == '/chart'){
      active.value = 2
    }else{
      active.value = 3
    }
})

</script>

<style lang="less" scoped>

</style>